<template>
  <div>
    <div class="leaveMsg">
      <b class="bMargin">留言板</b>
      <div class="content">
        <el-row class="floot" v-for="(item, index) in list" :key="index">
          <el-col :span="6" class="flootBorder">
            <div class="whichFloor">#{{list[index].id}}  {{list[index].user}}</div>
            <div class="whichTime">{{list[index].time}}</div>
          </el-col>
          <el-col :span="18" class="textContent">{{list[index].text}}</el-col>
        </el-row>
        <!-- <el-pagination layout="prev, pager, next" :total="50" class="pages"></el-pagination> -->
        <el-input v-model="inputText" class="input" type="textarea" rows="6" resize="none" :disabled="disabled"></el-input>
        <el-button class="submit" type="primary" @click="submit(inputUser, inputText, time)" :disabled="disabled">{{ this.$store.state.isLogin ? '提交' : '请先登录' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'leaveMsgMain',
  data () {
    return {
      list: [],
      inputText: '',
      inputUser: '',
      time: '',
      detailTime: '',
      disabled: !this.$session.has("userName")
    }
  },
  mounted () {
    this.axios.get('api/getLeaveMsgList').then((res) => {
      this.list = res.data
      for (let i = 0; i < res.data.length; i++) {
        const time = new Date(this.list[i].time)
        const resDate = time.getFullYear() + '-' + this.p((time.getMonth() + 1)) + '-' + this.p(time.getDate())
        const resTime = this.p(time.getHours()) + ':' + this.p(time.getMinutes()) + ':' + this.p(time.getSeconds())
        res.data[i].time = `${resDate} ${resTime}`
      }
      this.list = this.list.reverse()
    }),
    setInterval(() => {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
      let time = `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
      let detailTime = `${hh}:${mf}:${ss}`
      this.time = time,
      this.detailTime = detailTime
    }, 1000)
  },
  methods: {
    getHrefParams (valUser, valText, valTime) {
      return "api/addLeaveMsg?user=" + valUser + "&text=" + valText + "&time=" + valTime
    },
    submit (valUser, valText, valTime) {
      this.axios.post("api/addLeaveMsg", {
          user: this.$store.state.userName,
          text: valText,
          time: valTime
        }).then(
        this.$router.go(0)
      )
    },
    p (s) {
      return s < 10 ? '0' + s : s
    }
  }
}
</script>

<style lang='stylus' scoped>
  .leaveMsg
    border-radius 0.63rem
    .bMargin
      color #eee
    .content
      margin-top 0.63rem
      .pages
        margin 0.5rem 0
        padding .5rem 0
        background-color rgba(221, 221, 221, 0.5)
        border-bottom #bbbbbb 0.06rem solid
        box-shadow 0.13rem 0.13rem 0.13rem #444
        border-radius 0.31rem
        font-size 0.75rem
      .submit
        width 100%
        height 2.25rem
        margin-top 10px
      .input
        margin 0.31rem 0
        font-size 1rem
        box-shadow 0.13rem 0.13rem 0.13rem #444
        font-weight bold
      .floot
        overflow hidden
        border-radius 0.31rem
        margin-top 0.5rem
        background-color rgba(221, 221, 221, 0.5)
        border-bottom #bbbbbb 0.06rem solid
        box-shadow 0.13rem 0.13rem 0.13rem #444
        font-size 0.75rem
        .flootBorder
          border-right  #bbbbbb 0.06rem solid
          padding 0.31rem 0
          .whichFloor
            font-size 0.94rem
            font-weight bold
        .textContent
          padding 0.63rem
          text-align left
</style>
